<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="black-translucent" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <meta http-equiv="X-UA-Compatible" content="IE=10" />
    <title>{if $meta.title}{$meta.title}{else}日照钢铁营销服务中心{/if}</title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="stylesheet" type="text/css" href="{$cdn_path|cdn_url}/css/core.css?v={$initConf.CSS_VERSION}">
    <script type="text/javascript" src="{$cdn_path|cdn_url}/js/jquery-1.7.2.min.js?v={$initConf.JS_VERSION}"></script>
</head>
<body>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript" src="{$cdn_path|cdn_url}/js/jquery.form.js?v={$initConf.JS_VERSION}"></script>
<style>

    .btns{position: relative;overflow: hidden;margin-right: 4px;display:inline-block;
        *display:inline;padding:4px 10px 4px;font-size:14px;line-height:18px;
        *line-height:20px;color:#fff;
        text-align:center;vertical-align:middle;cursor:pointer;background:#5bb75b;
        border:1px solid #cccccc;border-color:#e6e6e6 #e6e6e6 #bfbfbf;
        border-bottom-color:#b3b3b3;-webkit-border-radius:4px;
        -moz-border-radius:4px;border-radius:4px;}
    .btns input{position: absolute;top: 0; right: 0;margin: 0;border:solid transparent;
        opacity: 0;filter:alpha(opacity=0); cursor: pointer;}
    .progress{position:relative;
        width:150px;padding: 1px; border-radius:3px; display:none}
    .bar {background-color: green; display:block; width:0%; height:20px;
        border-radius:3px; }
    .percent{position:absolute; height:20px; display:inline-block;
        top:3px; left:2%; color:#fff }
    .files{height:22px; line-height:22px; margin:10px 0}
    .delimg{margin-left:20px; color:#090; cursor:pointer}
</style>
<div class="title tc ml-30 mr-10">
	<h2>业务员走访客户信息录入</h2>
</div>
<div class="content px-20">
	<section id="step1">
		<table class="my-10">
		    <tbody>
		        <tr>
		            <td class="pl-15 tr">走访客户名称: </td><td class="pl-15"><input id="visit_name" name="visit_name" type="text"/><br/><font color='red' id='td_visit_name'></font></td>
		        </tr>
		        <tr>
		            <td class="pl-15 tr">客户详细地址: </td><td class="pl-15"><input id="visit_addr" name="visit_addr" type="text"/><br/><font color='red' id='td_visit_addr'></font></td>
		        </tr>
		        <tr>
		            <td class="pl-15 tr">接待人姓名:</td><td class="pl-15"><input id="recevie_name" name="recevie_name" type="text" /><br/><font color='red' id='td_recevie_name'></font></td>
		        </tr>
		        <tr>
		            <td class="pl-15 tr">接待人职务:</td><td class="pl-15"><input id="recevie_study" name="recevie_study" type="text"/><br/><font color='red' id='td_recevie_study'></font></td>
		        </tr>
		        <tr>
		            <td class="pl-15 tr">接待人电话:</td><td class="pl-15"><input id="recevie_mobile" name="recevie_mobile" type="tel" /><br/><font color='red' id='td_recevie_mobile'></font></td>
		        </tr>
		        <tr>
		            <td class="pl-15 tr">接待人邮箱:</td><td class="pl-15"><input id="recevie_email" name="recevie_email" type="email" /><br/><font color='red' id='td_recevie_email'></font></td>
		        </tr>
                <tr>
                    <td class="pl-15 tr">走访人姓名:</td><td class="pl-15"><input id="name" name="name" type="text" /><br/><font color='red' id='td_name'></font></td>
                </tr>
                <tr>
                    <td class="pl-15 tr">走访人归属单位:</td><td class="pl-15">
                        <select name="unit" id="unit">
                            <option value="">请选择您的归属单位</option>
                            {foreach item=info from=$list}
                            <option value="{$info.unit_category_id}">{$info.category_name}</option>
                            {/foreach}
                        </select>
                        <br/><font color='red' id='td_unit'></font>
                    </td>
                </tr>

		        <tr>
		            <td class="pl-15 tr">用户概况:</td>
		            <td class="pl-15">
		              <textarea id="recevie_facts" name="recevie_facts"></textarea>
					</td>
		        </tr>
		        <tr>
		            <td class="pl-15 tr">合作展望:</td>
		            <td class="pl-15">
		              <textarea id="recevie_question" name="recevie_question"></textarea>
		              <br/><font color='red' id='td_recevie_question'></font>
					</td>
		        </tr>
                <tr>
                    <td class="pl-15 tr">现场拍照:</td>
                    <td class="pl-15">
                        <span id="yulan"   class="btns" style="display:inline-block; margin: 0px auto; display: none">预览</span>

                        <div class="btns">
                            <span>选取照片</span>
                            <input id="fileupload" type="file" name="mypic">
                        </div>
                        <div class="progress">
                            <span class="bar"></span><span class="percent">0%</span >
                        </div>

                        <br/><font color='red' id='td_photo'></font>
                    </td>
                </tr>

                <tr>
                    <td class="pl-15 tr">走访时间:</td><td class="pl-15" style="font-weight: 500;">
                    <input id="time" name="time" type="text" value="{$time}" /><br/><font color='red' id='td_time'></font>
                </td>
                </tr>
		    </tbody>
		</table>
		<p class="tc mt-30"><span id="btn_submit" class="btn w-150" style="display:inline-block; margin: 0px auto;"> 提 交  </span></p>
        <p class="tc mt-30"><span id="btn_submit2" class="btn w-150" style="margin: 0px auto;display: none;"> 提 交 中... </span></p>
        <p class="tc mt-30"><font color='red' id='td_submit' style="display: none;">提交失败，网络可能不稳定，请重新尝试</font></p>


	</section>
</div>
<script type="text/javascript">

var imgUrl = null;
$(function () {
    var bar = $('.bar');
    var percent = $('.percent');
    var showimg = $('#showimg');
    var progress = $(".progress");
    var files = $(".files");
    var btn = $(".btns span");
    $("#fileupload").wrap("<form id='myupload' action='/index.php?act=interview&st=ajaxUpload' method='post' enctype='multipart/form-data'></form>");
    $("#fileupload").change(function(){
        $("#myupload").ajaxSubmit({
            dataType:  'json',
            beforeSend: function() {
                showimg.empty();
                progress.show();
                var percentVal = '0%';
                bar.width(percentVal);
                percent.html(percentVal);
                btn.html("上传中...");
                $("#yulan").hide();
            },
            uploadProgress: function(event, position, total, percentComplete) {
                var percentVal = percentComplete + '%';
                bar.width(percentVal);
                percent.html(percentVal);
            },
            success: function(data) {
                imgUrl = data.pic;
                progress.hide();
                $("#yulan").show();
                btn.html("重新选取");
                $("#td_photo").hide();
            },
            error:function(xhr){
                btn.html("选取照片");
                alert(xhr.responseText);
                bar.width('0')
                progress.hide();
            }
        });
    });
});


$(function(){
	$("#btn_submit").click(function(){
		var visit_name = $.trim($("#visit_name").val());
		var visit_addr = $.trim($("#visit_addr").val());
		var recevie_name = $.trim($("#recevie_name").val());
        var recevie_study = $.trim($("#recevie_study").val());
        var recevie_mobile = $.trim($("#recevie_mobile").val());
        var recevie_email = $.trim($("#recevie_email").val());
        var name = $.trim($("#name").val());
        var unit = $.trim($("#unit").val());
        var recevie_facts = $.trim($("#recevie_facts").val());
        var recevie_question = $.trim($("#recevie_question").val());
        var time = $.trim($("#time").val());

		var errCount = 0;
		var errMsg = '';
		if(visit_name == '') {
			errMsg = "请输入走访客户名称！";
			$("#td_visit_name").html(errMsg).show();;
			errCount = errCount+1;
		}
		if(visit_addr == '') {
			errMsg = "请输入客户详细地址！";
			$("#td_visit_addr").html(errMsg).show();;
			errCount = errCount+1;
		}
		if(recevie_name == '') {
			errMsg = "请输入接待人姓名！";
			$("#td_recevie_name").html(errMsg).show();;
			errCount = errCount+1;
		}
        /*if(recevie_study == '') {
            errMsg = "请输入接待人职务！";
            $("#td_recevie_study").html(errMsg).show();;
            errCount = errCount+1;
        }
        if(recevie_mobile == '') {
            errMsg = "请输入接待人电话！";
            $("#td_recevie_mobile").html(errMsg).show();;
            errCount = errCount+1;
        }
        if(recevie_email == '') {
            errMsg = "请输入接待人邮箱！";
            $("#td_recevie_email").html(errMsg).show();;
            errCount = errCount+1;
        }*/
        if(name == '') {
            errMsg = "请输入走访人姓名！";
            $("#td_name").html(errMsg).show();;
            errCount = errCount+1;
        }
        if(unit == '') {
            errMsg = "请选择您的归属单位！";
            $("#td_unit").html(errMsg).show();;
            errCount = errCount+1;
        }
//        if(imgUrl == null) {
//            errMsg = "请上传现场照片！";
//            $("#td_photo").html(errMsg).show();;
//            errCount = errCount+1;
//        }

        if(time == '') {
            errMsg = "走访时间不能为空！";
            $("#td_time").html(errMsg).show();;
            errCount = errCount+1;
        }

		if(errCount == 0) {
            var ajaxdata = {
                'visit_name' :visit_name,
                'visit_addr' : visit_addr,
                'recevie_name' : recevie_name,
                'recevie_study' : recevie_study,
                'recevie_mobile' : recevie_mobile,
                'recevie_email' : recevie_email,
                'name' : name,
                'unit' : unit,
                'recevie_facts' : recevie_facts,
                'recevie_question' : recevie_question,
                'time' : time
            };

            if(imgUrl != null){
                ajaxdata['imgUrl'] = imgUrl;
            }

            $.ajax({
                type : 'POST',
                url : '/index.php?act=interview&st=visitEntryDone',
                dataType : 'json',
                data : ajaxdata,
                timeout : 30000,
                beforeSend : function(XMLHttpRequest) {
                    $("#btn_submit").css('display','none');
                    $("#btn_submit2").css('display','block');
                    $("#td_submit").css('display','none');
                },
                success : function(data) {
                    if(data.code == 'success'){
                        window.location = '/index.php?act=interview&st=success'
                    }else{
                        $("#td_submit").css('display','block');
                    }
                    $("#btn_submit").css('display','block');
                    $("#btn_submit2").css('display','none');
                }
            });
		}
		return false;
	});
	$("input,textarea,select").change(function(){
		var obj = $(this).attr("id");
		var objVal = $.trim($("#"+obj).val());
		if(objVal != '') {
			$("#td_"+obj).hide();
		}
	});


    wx.config({
        debug: false,
        appId: '{$config.appId}',
        timestamp:'{$config.timestamp}',
        nonceStr: '{$config.nonceStr}',
        signature:'{$config.signature}',
        jsApiList: ['checkJsApi',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'hideMenuItems',
            'showMenuItems',
            'hideAllNonBaseMenuItem',
            'showAllNonBaseMenuItem',
            'translateVoice',
            'startRecord',
            'stopRecord',
            'onRecordEnd',
            'playVoice',
            'pauseVoice',
            'stopVoice',
            'uploadVoice',
            'downloadVoice',
            'chooseImage',
            'previewImage',
            'uploadImage',
            'downloadImage',
            'getNetworkType',
            'openLocation',
            'getLocation',
            'hideOptionMenu',
            'showOptionMenu',
            'closeWindow',
            'scanQRCode',
            'chooseWXPay',
            'openProductSpecificView',
            'addCard',
            'chooseCard',
            'openCard']
    });

     wx.ready(function () {
     // 在这里调用 API
//         $("#photo").click(function(){
//             wx.chooseImage({
//                 success: function (res) {
//                     var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
//                     localIds_ = localIds;
//                     uplodaImg();
//                 }
//             });
//         });
         $("#yulan").click(function(){
             wx.previewImage({
                 current: imgUrl, // 当前显示的图片链接
                 urls: [imgUrl] // 需要预览的图片链接列表
             });
         });
     });

//     function uplodaImg(){
//         alert('开始上传'+localIds_)
//         wx.uploadImage({
//             localId: localIds_, // 需要上传的图片的本地ID，由chooseImage接口获得
//             isShowProgressTips: 1, // 默认为1，显示进度提示
//             success: function (res) {
//                 var serverId = res.serverId; // 返回图片的服务器端ID
//                 alert(serverId);
//                 /*
//                 //AJAX 获取图片
//                 var ajaxdata = {
//                     'serverId' :serverId
//                 };
//                 $.ajax({
//                     type : 'POST',
//                     url : '/index.php?act=interview&st=uploadImg',
//                     dataType : 'json',
//                     data : ajaxdata,
//                     timeout : 30000,
//                     beforeSend : function(XMLHttpRequest) {
//                         $("#photo").text('上传中');
//                     },
//                     success : function(data) {
//                         if(data.code == 'success'){
//                             //显示预览按钮等
//                             $("#photo").text('重新拍照');
//                             $("#yulan").css('display','block');
//                         }else{
//                             $("#photo").text('拍照');
//                             alert('图片上传失败');
//                         }
//                     }
//                 });*/
//             }
//         });
//     }
});
</script>
{include file="footer.html"}